<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>用户详情</span>
        <el-button class="button" @click="goBack">返回</el-button>
      </div>
    </template>
    <p>id: {{ $route.query.id }}</p>
    <p>姓名: {{ $route.query.name }}</p>
    <p>年龄: {{ $route.query.age }}</p>
    <p>身份: {{ $route.query.position }}</p>
    <p>添加时间: {{ dateFormat($route.query.addTime) }}</p>
  </el-card>
</template>

<script setup lang="ts">
//获取全局发送请求的对象
import {getCurrentInstance} from "vue";
import {useRouter} from "vue-router";

// 全局日期格式化
const dateFormat = getCurrentInstance()?.appContext.config.globalProperties.$dateFormat

// 编程式路由对象
const router = useRouter()
// -----------响应式数据部分开始----------

// -----------响应式数据部分结束----------

// -----------方法部分开始----------
// 返回
const goBack = () => {
  router.go(-1)
}
// -----------方法部分结束----------
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}
.el-button {
  float: right;
}

</style>
